<template>

  <!-- <div class="container" v-if="boole" @mouseenter="isShowTooltip" ref="heightRef">
    {{title}}
  </div>
  <el-tooltip v-else class="item" style="width: 90%;" effect="dark" :content="title" placement="top-start">
    <div class="title" style="width: 100%">{{ title }}</div>
  </el-tooltip> -->
  <el-tooltip popper-class="my-tooltip-popper" :content="title" placement="top" effect="dark" :disabled="isDisabled" >
    <div class="wordnowrap no-link-text text-line-1" @mouseenter="isShowTooltip">{{ title }}</div>
  </el-tooltip>

</template>

<script>
import { onMounted, reactive, toRefs } from "vue";

export default {
  name: "Index",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  setup() {
    var datas = reactive({
      isDisabled: false,
    });
    const isShowTooltip = (e) => {
      const clientWidth = e.target.clientWidth;
      const scrollWidth = e.target.scrollWidth;
      const arrList = Array.from(e.target.classList);
      if (scrollWidth > clientWidth) {
        datas.isDisabled = false;
        if (!arrList.includes("hover-blue")) {
          e.target.classList.add("hover-blue");
        }
      } else {
        datas.isDisabled = true;
        e.target.classList.remove("hover-blue");
      }
    };

    return {
      ...toRefs(datas),
      isShowTooltip,
    };
  },
};
</script>

<style lang="scss"  scoped>
@import "@/style/basics.scss";
.wordnowrap {
  color: $main-color;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hover-blue:hover {
  cursor: pointer;
  color: $main-color;
}
.link-text {
  color: $main-color;
  &:hover {
    cursor: pointer;
  }
}
.no-link-text {
  color: $font-color-main;
  &:hover {
    cursor: auto;
    color: $font-color-main;
  }
}
</style>
